<template>
  <div>
    <div class="app-container">
      <div class="search-container">
        <!-- 基本信息 -->
        <h2>基本信息</h2>
        <el-form ref="ruleFormRef" style="max-width: 1200px" :model="ruleForm" :rules="rules" label-width="auto"
          class="demo-ruleForm" :size="formSize" status-icon>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name" placeholder="（必填）" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="ruleForm.sex">
                  <el-radio :value="true">男</el-radio>
                  <el-radio :value="false">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="证件类型" prop="cardType" style="width: 590px">
            <el-select v-model="ruleForm.cardType" placeholder="（必选）" clearable>
              <el-option label="身份证" value="身份证" />
              <el-option label="护照" value="护照" />
              <el-option label="军官证" value="军官证" />
              <el-option label="士兵证" value="士兵证" />
              <el-option label="港澳台往来通行证" value="港澳台往来通行证" />
              <el-option label="警官证" value="警官证" />
              <el-option label="外国人永久居留证" value="外国人永久居留证" />
              <el-option label="边民出入通行证" value="边民出入通行证" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="ruleForm.phone" placeholder="（必填）" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="ruleForm.email" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="毕业院校" prop="graduateInstitutions">
                <el-input v-model="ruleForm.graduateInstitutions" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="学历" prop="educationBackground">
                <el-select v-model="ruleForm.educationBackground" clearable>
                  <el-option label="小学" value="小学" />
                  <el-option label="初中" value="初中" />
                  <el-option label="高中" value="高中" />
                  <el-option label="大专" value="大专" />
                  <el-option label="本科" value="本科" />
                  <el-option label="硕士" value="硕士" />
                  <el-option label="博士" value="博士" />
                  <el-option label="其他" value="其他" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 入职信息 -->
          <h2>入职信息</h2>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <!-- 这里要调用单位的接口 -->
              <el-form-item label="单位" prop="unitId">
                <el-select v-model="ruleForm.unitId" clearable>
                  <el-option label="宏光养羊" :value="1" />
                  <el-option label="北京养羊" :value="2" />
                </el-select>
              </el-form-item>
              <!-- 调用部门接口 -->
              <el-form-item label="部门" prop="departmentId">
                <el-select v-model="ruleForm.departmentId" clearable>
                  <el-option label="安全部" :value="1" />
                  <el-option label="财务部" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="员工状态" prop="employeeStatus">
                <el-select v-model="ruleForm.employeeStatus" clearable>
                  <el-option label="试用员工" :value="1" />
                  <el-option label="在职员工" :value="2" />
                  <el-option label="实习员工" :value="3" />
                  <el-option label="临时工人" :value="4" />
                  <el-option label="调职员工" :value="5" />
                  <el-option label="专家顾问" :value="6" />
                  <el-option label="返聘人员" :value="7" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <!-- 入职日期 -->
              <el-form-item prop="hireDate" label="入职日期">
                <el-date-picker v-model="ruleForm.hireDate" type="date" placeholder="选择入职日期" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <!-- 转正日期 -->
              <el-form-item prop="regularizationDate" label="转正日期">
                <el-date-picker v-model="ruleForm.regularizationDate" type="date" placeholder="选择转正日期"
                  style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="职务" prop="position">
                <el-input v-model="ruleForm.position" placeholder="请输入职务" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="岗位" prop="jobTitle">
                <el-input v-model="ruleForm.jobTitle" placeholder="请输入岗位" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="人事级别" prop="personnelLevel" style="width: 590px">
            <el-input v-model="ruleForm.personnelLevel" placeholder="请输入人事级别" />
          </el-form-item>

          <!-- 账号信息 -->
          <h2>账号信息</h2>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="账号" prop="uname">
                <el-input v-model="ruleForm.uname" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="密码" prop="upwd">
                <el-input v-model="ruleForm.upwd" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 调用获取角色信息接口 -->
          <el-form-item label="角色" prop="rid" style="width: 590px">
            <el-select v-model="ruleForm.rid" placeholder="请选择角色">
              <el-option v-for="item in   roleList  " :key="item.rid" :label="item.rname" :value="item.rid" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import PermissionAPI from '@/api/PermissionsManagement/index'
import { AddUserModel } from '@/api/PermissionsManagement/model'

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  uname: "",
  upwd: "",
  sex: true,
  name: "",
  cardType: "",
  cardNumber: "",
  phone: "",
  email: "",
  partMent: "",
  ustae: 0,
  educationBackground: "",
  graduateInstitutions: "",

  unitId: "",
  employeeStatus: "",
  departmentId: "",
  hireDate: "2024-07-29",
  regularizationDate: "2024-07-29",
  position: "",
  jobTitle: "",
  personnelLevel: "",

  rid: ""
})

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '姓名不能为空', trigger: 'blur' },
    { min: 3, max: 10, message: ' 姓名长度在 3 到 10 个字符', trigger: 'blur' },
  ],
  upwd: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, max: 10, message: '密码长度在 6 到 10 个字符', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { min: 11, max: 11, message: '手机号长度为11位', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
  ],
  departmentId: [
    { required: true, message: '部门不能为空', trigger: 'blur' },
  ],
  rid: [
    { required: true, message: '角色不能为空', trigger: 'blur' },
  ],
  uname: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' },
  ],
  sex: [
    { required: true, message: '性别不能为空', trigger: 'blur' },
  ],
  cardType: [
    { required: true, message: '请选择证件类型', trigger: 'blur' },
  ],
  cardNumber: [
    { required: true, message: '证件号码不能为空', trigger: 'blur' },
  ],
  partMent: [
    { required: true, message: '所属部门不能为空', trigger: 'blur' },
  ],
  ustae: [
    { required: true, message: '状态不能为空', trigger: 'blur' },
  ],
  educationBackground: [
    { required: true, message: '请选择学历', trigger: 'blur' },
  ],
  graduateInstitutions: [
    { required: true, message: '请输入毕业院校', trigger: 'blur' },
  ],
  unitId: [
    { required: true, message: '请选择单位', trigger: 'blur' },
  ],
  employeeStatus: [
    { required: true, message: '请选择员工状态', trigger: 'blur' }
  ],
  hireDate: [
    { required: true, message: '入职日期不能为空', trigger: 'blur' },
  ],
  regularizationDate: [
    { required: true, message: '转正日期不能为空', trigger: 'blur' },
  ],
  position: [
    { required: true, message: '职位不能为空', trigger: 'blur' },
  ],
  jobTitle: [
    { required: true, message: '职称不能为空', trigger: 'blur' },
  ],
  personnelLevel: [
    { required: true, message: '请选择人员等级', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      PermissionAPI.AddUserInfo(ruleForm).then((res: any) => {
        debugger;
        if (res.data > 0) {
          ElMessage.success('新增成功')
        }
        else {
          ElMessage.error('新增失败')
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const roleList = ref([])
const getRole = () => {
  PermissionAPI.getRoleSelect().then((res: any) => {
    roleList.value = res.data
    console.log(roleList.value)
  })
}

//生命周期
onMounted(() => {
  //绑定角色下拉框
  getRole()
})
</script>